// rem-scaling.ts

// 1. 扩展 Window 接口
declare global {
  interface Window {
    /** 基准 rem 大小，可在外部修改 */
    baseRootValue: number;
    /** 重置 rem，外部可调用，传入新的基准值 */
    resetRem: (newBaseSize?: number) => void;
  }
}

// 2. 配置初始基准大小
//    如果外部页面已经给 window.baseRootValue 赋值，则优先使用；否则默认为 15
window.baseRootValue = window.baseRootValue ?? 15;
let baseSize: number = window.baseRootValue;

// 3. 计算并设置根元素 font-size 的函数
function setRem(): void {
  // 1920 是设计稿宽度，你可以根据项目自行调整
  const scale = document.documentElement.clientWidth / 1920;
  // Math.min(scale, 2) 可让放大比例不超过 2 倍
  const newSize = baseSize * Math.min(scale, 2);
  document.documentElement.style.fontSize = `${newSize}px`;
}

// 4. 初始化调用一次
setRem();

// 5. 重置 rem 的函数，可在运行时通过 window.resetRem(20) 这样的方式修改基准大小
const resetRem = (newBaseSize?: number): void => {
  if (typeof newBaseSize === 'number') {
    baseSize = newBaseSize;
    window.baseRootValue = newBaseSize;
  }
  setRem();
};
window.resetRem = resetRem;

// 6. 监听窗口 resize 事件，自动更新 rem
window.addEventListener('resize', setRem);

// 7. 为了让此文件成为一个模块（否则 declare global 会报错）
export {};
